<template>
  <view class="zero-markdown-view">
    <mp-html
      :key="mpkey"
      :selectable="selectable"
      :scroll-table="scrollTable"
      :tag-style="tagStyle"
      :markdown="true"
      :content="html"
    ></mp-html>
  </view>
</template>

<script>
import mpHtml from '../mp-html/mp-html'

export default {
  name: 'zero-markdown-view',
  components: {
    mpHtml,
  },
  props: {
    markdown: {
      type: String,
      default: '',
    },
    selectable: {
      type: [Boolean, String],
      default: true,
    },
    scrollTable: {
      type: Boolean,
      default: true,
    },
    themeColor: {
      type: String,
      default: '#007AFF',
    },
    codeBgColor: {
      type: String,
      default: '#2d2d2d',
    },
  },
  data() {
    return {
      html: '',
      tagStyle: '',
      mpkey: 'zero',
    }
  },
  watch: {
    markdown: async function (val) {
      // let index = 0
      // let timer = await setInterval(() => {
      //   if (this.markdown.length < index) {
      //     this.isdui = false
      //     clearInterval(timer)
      //   }
      //   // this.msgList[this.msgList.length - 1].msg += text.substr(index, 1)
      //   this.html += this.markdown.substr(index, 1)
      //   console.log(index,'indexxxxxx');

      //   index++
      // }, 100)
      console.log(this.markdown, '不错不错11111')
      this.html = this.markdown
    },
  },
  created() {
    this.initTagStyle()
  },
  async mounted() {
    // 这一步是需要进行把```给放下一换行才可以实现那个markedowm文档
    // let strArr = this.markdown.split('```')
    // let str = ''
    // strArr.forEach((item, index) => {
    //   console.log(item, '1223121111111111')
    //   if (index === strArr.length - 1) return (str = str + item)

    //   str = str  + item + '\n'+ '```'

    // })
    // console.log(str, 'str')

    // let index = 0
    // let timer = await setInterval(() => {
    //   if (str.length < index) {
    //     console.log(this.html, 'kkkkk')
    //     this.html = this.markdown

    //     clearInterval(timer)
    //   }

    //   // this.msgList[this.msgList.length - 1].msg += text.substr(index, 1)

    //   this.html += str.substr(index, 1)

    //   // console.log(this.html,'我看看  的');
    //   index++
    // }, 50)
    // console.log(this.markdown.length, '不错不错')
    this.html = this.markdown
  },
  methods: {
    initTagStyle() {
      const themeColor = this.themeColor
      const codeBgColor = this.codeBgColor
      let zeroStyle = {
        p: `
				margin:5px 5px;
				font-size: 15px;
				line-height:1.75;
				letter-spacing:0.2em;
				word-spacing:0.1em;
				`,
        // 一级标题
        h1: `
				margin:25px 0;
				font-size: 24px;
				text-align: center;
				font-weight: bold;
				color: ${themeColor};
				padding:3px 10px 1px;
				border-bottom: 2px solid ${themeColor};
				border-top-right-radius:3px;
				border-top-left-radius:3px;
				`,
        // 二级标题
        h2: `
				margin:40px 0 20px 0;
				font-size: 20px;
				text-align:center;
				color:${themeColor};
				font-weight:bolder;
				padding-left:10px;
				// border:1px solid ${themeColor};
				`,
        // 三级标题
        h3: `
				margin:30px 0 10px 0;
				font-size: 18px;
				color: ${themeColor};
				padding-left:10px;
				border-left:3px solid ${themeColor};
				`,
        // 引用
        blockquote: `
				margin:15px 0;
				font-size:15px;
				color: #777777;
				border-left: 4px solid #dddddd;
				padding: 0 10px;
				 `,
        // 列表
        ul: `
				margin: 10px 0;
				color: #555;
				`,
        li: `
				margin: 5px 0;
				color: #555;
				`,
        // 链接
        a: `
				// color: ${themeColor};
				`,
        // 加粗
        strong: `
				font-weight: border;
				color: ${themeColor};
				`,
        // 斜体
        em: `
				color: ${themeColor};
				letter-spacing:0.3em;
				`,
        // 分割线
        hr: `
				height:1px;
				padding:0;
				border:none;
				// border-top:medium solid #333;
				text-align:center;
				background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
				`,
        // 表格
        table: `
				border-spacing:0;
				overflow:auto;
				min-width:100%;
				margin:10px 0;
				border-collapse: collapse;
				`,
        th: `
				border: 1px solid #202121;
				color: #555;
				`,
        td: `
				color:#555;
				border: 1px solid #555555;
				`,
        pre: `
				border-radius: 5px;
				white-space: pre;
				background: ${codeBgColor};
				font-size:12px;
				position: relative;
				`,
      }
      this.tagStyle = zeroStyle
    },
  },
}

//   // 实现打字机效果
//   let index = 0
// let timer = await setInterval(() => {
//   if (this.markdown.length < index) {
//     this.isdui = false
//     clearInterval(timer)
//   }
//   // this.msgList[this.msgList.length - 1].msg += text.substr(index, 1)
//   console.log(this.markdown.substr(index, 1), '我看看')
//   this.html += this.markdown.substr(index, 1)
//   this.scrollToBottom()
//   index++
// }, 100)
</script>

<style lang="scss">
.zero-markdown-view {
  padding: 15rpx;
  position: relative;
}
</style>
